<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件类型显示</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <label for="oss-url">输入 OSS 文件地址:</label><br>
    <input type="text" id="oss-url" name="oss-url"><br>
    <button onclick="getFileType()">获取文件类型</button><br>
    <div id="file-type"></div>

    <script>
        function getFileType() {
            var ossUrl = $('#oss-url').val(); // 获取用户输入的 OSS 文件地址
            var fileTypeDiv = $('#file-type'); // 用于显示文件类型的 div

            // 从 OSS 文件地址中提取文件后缀名
            var fileExtension = ossUrl.split('.').pop().toLowerCase();

            // 根据文件后缀名判断文件类型
            var fileType = '未知类型';
            if (fileExtension === 'mp') {
                fileType = '视频';
            } else if (fileExtension === 'jpg' || fileExtension === 'jpeg' || fileExtension === 'png' || fileExtension === 'gif') {
                fileType = '图片';
            } else if (fileExtension === 'pdf') {
                fileType = 'PDF';
            } else if (fileExtension === 'txt' || fileExtension === 'csv' || fileExtension === 'xml') {
                fileType = '文本文件';
            } else {
                // 可以根据需要添加更多类型的判断
            }

            // 显示文件类型
            fileTypeDiv.text('文件类型：' + fileType);
        }
    </script>
</body>
</html>
